<template>
  <el-col :span="item.__config__.span"
    :class="{'item-card':item.__config__.jnpfKey==='card','item-table':item.__config__.jnpfKey==='table'}"
    v-if="!item.__config__.noShow && (!item.__config__.visibility || (Array.isArray(item.__config__.visibility) && item.__config__.visibility.includes('pc')))">
    <template v-if="item.__config__.layout==='colFormItem'">
      <template v-if="item.__config__.jnpfKey==='divider'">
        <el-divider :content-position="item.contentPosition">{{item.content}}
        </el-divider>
      </template>
      <template v-else-if="item.__config__.jnpfKey==='text'">
        <jnpf-form-tip-item label-width="0"
          :tipLabel="item.__config__.label?item.__config__.tipLabel:''">
          <JnpfText :content="item.content" :textStyle="item.textStyle" />
        </jnpf-form-tip-item>
      </template>
      <template v-else-if="item.__config__.jnpfKey==='link'">
        <jnpf-form-tip-item label-width="0"
          :tipLabel="item.__config__.label?item.__config__.tipLabel:''">
          <jnpf-link :content="item.content" :href="item.href" :target="item.target"
            :textStyle="item.textStyle" />
        </jnpf-form-tip-item>
      </template>
      <template v-else-if="item.__config__.jnpfKey==='alert'">
        <jnpf-form-tip-item label-width="0"
          :tipLabel="item.__config__.label?item.__config__.tipLabel:''">
          <el-alert :title="item.title" :type="item.type" :closable="item.closable"
            :description="item.description" :show-icon="item.showIcon" style="word-break: break-all"
            :closeText="item.closeText" />
        </jnpf-form-tip-item>
      </template>
      <template v-else-if="item.__config__.jnpfKey==='groupTitle'">
        <jnpf-form-tip-item label-width="0">
          <JnpfGroupTitle :content="item.content" :tipLabel="item.tipLabel"
            :content-position="item.contentPosition" />
        </jnpf-form-tip-item>
      </template>
      <template v-else-if="item.__config__.jnpfKey==='button'">
        <jnpf-form-tip-item label-width="0"
          :tipLabel="item.__config__.label?item.__config__.tipLabel:''">
          <jnpf-button :align="item.align" :buttonText="item.buttonText" :type="item.type"
            :disabled="item.disabled" />
        </jnpf-form-tip-item>
      </template>
      <template v-else>
        <jnpf-form-tip-item :prop="item.__vModel__"
          :label-width="item.__config__.showLabel?`${item.__config__.labelWidth||formConf.labelWidth}px`:'0'"
          :label="item.__config__.showLabel ? item.__config__.label+ (formConf.labelSuffix || '') : '' "
          :tipLabel="item.__config__.label&&item.__config__.showLabel?item.__config__.tipLabel:''">
          <template v-if="item.__config__.jnpfKey==='uploadFile'">
            <JnpfUploadFile v-model="item.__config__.defaultValue" detailed disabled />
          </template>
          <template v-else-if="item.__config__.jnpfKey==='uploadImg'">
            <el-image :src="define.comUrl+cItem.url" class="dy-img"
              v-for="(cItem,ci) in item.__config__.defaultValue" :key="ci"
              :preview-src-list="getImgList(item.__config__.defaultValue)" :z-index="10000">
            </el-image>
          </template>
          <template v-else-if="item.__config__.jnpfKey==='colorPicker'">
            <el-color-picker v-model="item.__config__.defaultValue" :show-alpha="item.showAlpha"
              :color-format="item.colorFormat" :size="item.size" disabled />
          </template>
          <template v-else-if="item.__config__.jnpfKey==='rate'">
            <el-rate v-model="item.__config__.defaultValue" :max="item.count"
              :allow-half="item.allowHalf" :show-text="item.showText" :show-score="item.showScore"
              disabled />
          </template>
          <template v-else-if="item.__config__.jnpfKey==='slider'">
            <div class="slider-box">
              <el-slider v-model="item.__config__.defaultValue" :range='item.range'
                :show-stops="item.showStops" />
              <div class="slider-mark"></div>
            </div>
          </template>
          <template v-else-if="item.__config__.jnpfKey==='editor'">
            <div v-html="item.__config__.defaultValue"></div>
          </template>
          <template v-else-if="item.__config__.jnpfKey==='relationForm'">
            <a @click="toDetail(item)" style="color:#1890ff">{{ item.name }}</a>
          </template>
          <template v-else-if="item.__config__.jnpfKey==='popupSelect'">
            <p>{{ item.name }}</p>
          </template>
          <template v-else-if="item.__config__.jnpfKey==='barcode'">
            <jnpf-barcode :format="item.format" :lineColor="item.lineColor"
              :background="item.background" :width="item.width" :height="item.height"
              :staticText="item.staticText" :dataType="item.dataType"
              :relationField="item.relationField+'_id'" :formData="formValue"></jnpf-barcode>
          </template>
          <template v-else-if="item.__config__.jnpfKey==='qrcode'">
            <jnpf-qrcode :format="item.format" :colorLight="item.colorLight"
              :colorDark="item.colorDark" :width="item.width" :staticText="item.staticText"
              :dataType="item.dataType" :relationField="item.relationField+'_id'"
              :formData="formValue"></jnpf-qrcode>
          </template>
          <template v-else-if="item.__config__.jnpfKey==='calculate'&&item.isStorage==0">
            <JnpfCalculate :expression="item.expression" :isStorage="0" :formData="formValue"
              :isAmountChinese="item.isAmountChinese" :thousands="item.thousands"
              :precision="item.precision" :detailed="true" />
          </template>
          <template v-else-if="item.__config__.jnpfKey==='inputNumber'">
            <JnpfNumber v-model="item.__config__.defaultValue" :thousands="item.thousands"
              :isAmountChinese="item.isAmountChinese" :addonBefore="item.addonBefore"
              :addonAfter="item.addonAfter" :precision="item.precision"></JnpfNumber>
          </template>
          <template v-else-if="item.__config__.jnpfKey === 'input'">
            <jnpf-input v-model="item.__config__.defaultValue" :addonBefore="item.addonBefore"
              class="jnpf-detail-text" :addonAfter="item.addonAfter" :useMask="item.useMask"
              :maskConfig="item.maskConfig" detailed />
          </template>
          <template v-else-if="item.__config__.jnpfKey === 'sign'">
            <JnpfSign v-model="item.__config__.defaultValue" detailed />
          </template>
          <template v-else-if="item.__config__.jnpfKey === 'iframe'">
            <JnpfIframe :href='item.href' :height='item.height' :borderType='item.borderType'
              :borderColor='item.borderColor' :borderWidth='item.borderWidth' />
          </template>
          <template v-else>
            <p class="jnpf-detail-text">
              <span v-if="item.addonBefore">{{item.addonBefore}}</span>{{getValue(item)}}<span
                v-if="item.addonAfter">{{item.addonAfter}}</span>
            </p>
            <p v-if="item.isAmountChinese" class="isAmountChinese jnpf-detail-text">
              {{ amountChinese(item.__config__.defaultValue) }}</p>
          </template>
        </jnpf-form-tip-item>
      </template>
    </template>
    <template v-else>
      <template v-if="item.__config__.jnpfKey==='card'">
        <el-card :shadow="item.shadow" :header="item.header" class="mb-20">
          <template slot="header">
            <span slot="label" v-if="item.__config__.tipLabel && item.header">{{item.header}}
              <el-tooltip placement="top" :content=item.__config__.tipLabel>
                <a class='el-icon-question tooltip-question'></a>
              </el-tooltip>
            </span>
            <span v-else>{{ item.header}}</span>
          </template>
          <el-row>
            <Item v-for="(childItem, childIndex) in item.__config__.children" :key="childIndex"
              :item="childItem" v-bind="$props" v-on="$listeners" />
          </el-row>
        </el-card>
      </template>
      <template v-if="item.__config__.jnpfKey==='row'">
        <el-row :gutter="formConf.gutter">
          <Item v-for="(childItem, childIndex) in item.__config__.children" :key="childIndex"
            :item="childItem" v-bind="$props" v-on="$listeners" />
        </el-row>
      </template>
      <template v-if="item.__config__.jnpfKey==='table'">
        <jnpf-form-tip-item label-width="0" v-if="!item.__config__.noShow">
          <div class="JNPF-common-title" v-if="item.__config__.showTitle">
            <span slot="label"
              v-if="item.__config__.tipLabel && item.__config__.label">{{item.__config__.label}}
              <el-tooltip placement="top" :content=item.__config__.tipLabel>
                <a class='el-icon-question tooltip-question'></a>
              </el-tooltip>
            </span>
            <h2 v-else>{{item.__config__.label}}</h2>
          </div>
          <el-table :data="item.__config__.defaultValue"
            :showSummary="!!item.__config__.defaultValue.length && !!item.showSummary && (item.summaryField && !!item.summaryField.length)"
            :summary-method="getSummaries">
            <el-table-column prop="index" type="index" width="50" label="序号" align="center"
              fixed="left" />
            <template v-for="(head,index) in complexHeaderList">
              <el-table-column :key="index" :label="head.fullName" :align="head.align"
                v-if="head.jnpfKey=='complexHeader'">
                <template v-for="(column,columnIndex) in item.__config__.children">
                  <template
                    v-if="head.childColumns&&head.childColumns.includes(column.__vModel__) ">
                    <el-table-column :key="columnIndex" :prop="column.__vModel__"
                      :label="column.__config__.label" :align="item.align"
                      v-if="column.__config__.jnpfKey==='relationForm'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <el-link :underline="false" type="primary"
                          @click.native="toTableDetail(column,scope.row[column.__vModel__+'_id'])">
                          {{ scope.row[column.__vModel__] }}</el-link>
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :prop="column.__vModel__" :align="item.align"
                      v-else-if="['relationFormAttr','popupAttr'].includes(column.__config__.jnpfKey)">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <p v-if="!column.__vModel__">
                          {{ scope.row[column.relationField.split('_jnpfTable_')[0]+'_'+column.showField] }}
                        </p>
                        <p v-else>
                          {{scope.row[column.__vModel__]}}
                        </p>
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :prop="column.__vModel__" min-width="250px" :align="item.align"
                      v-else-if="column.__config__.jnpfKey==='uploadFile'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <JnpfUploadFile v-model="scope.row[column.__vModel__]" detailed disabled />
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :prop="column.__vModel__" :align="item.align"
                      v-else-if="column.__config__.jnpfKey==='calculate' &&column.isStorage==0">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <JnpfCalculate :rowIndex="scope.$index" :expression="column.expression"
                          :isStorage="0" :formData="formValue"
                          :isAmountChinese="column.isAmountChinese" :thousands="column.thousands"
                          :precision="column.precision" :detailed="true" />
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :align="item.align" :prop="column.__vModel__"
                      v-else-if="column.__config__.jnpfKey==='uploadImg'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <JnpfUploadImg v-model="scope.row[column.__vModel__]" detailed disabled />
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :prop="column.__vModel__" :align="item.align"
                      v-else-if="column.__config__.jnpfKey==='inputNumber'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <JnpfNumber v-model="scope.row[column.__vModel__]"
                          :thousands="column.thousands" :isAmountChinese="column.isAmountChinese"
                          :addonBefore="column.addonBefore" :addonAfter="column.addonAfter"
                          :precision="column.precision"></JnpfNumber>
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :prop="column.__vModel__" :align="item.align"
                      v-else-if="column.__config__.jnpfKey==='sign'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <JnpfSign v-model="scope.row[column.__vModel__]" detailed />
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :prop="column.__vModel__" :align="item.align"
                      v-else-if="column.__config__.jnpfKey==='signature'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <JnpfSignature v-model="scope.row[column.__vModel__]" detailed />
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :prop="column.__vModel__" :align="item.align"
                      v-else-if="column.__config__.jnpfKey==='location'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <JnpfLocation v-model="scope.row[column.__vModel__]"
                          :enableLocationScope='column.enableLocationScope' detailed
                          :clearable='column.clearable' />
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :prop="column.__vModel__" :align="item.align"
                      v-else-if="column.__config__.jnpfKey==='slider'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <JnpfSlider v-model="scope.row[column.__vModel__]" disabled />
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :prop="column.__vModel__" :align="item.align"
                      v-else-if="column.__config__.jnpfKey==='rate'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <JnpfRate v-model="scope.row[column.__vModel__]" disabled />
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :label="column.__config__.label"
                      :align="column.align" :prop="column.__vModel__"
                      v-else-if="column.__config__.jnpfKey==='input'">
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <jnpf-input v-model="scope.row[column.__vModel__]" class="jnpf-detail-text"
                          :addonBefore="column.addonBefore" :addonAfter="column.addonAfter"
                          :useMask="column.useMask" :maskConfig="column.maskConfig" detailed />
                      </template>
                    </el-table-column>
                    <el-table-column :key="columnIndex" :prop="column.__vModel__"
                      :label="column.__config__.label" :align="item.align" v-else>
                      <template slot="header">
                        <span slot="label"
                          v-if="column.__config__.tipLabel &&column.__config__.label">{{column.__config__['label']}}
                          <el-tooltip placement="top" :content='column.__config__.tipLabel'>
                            <a class='el-icon-question tooltip-question'></a>
                          </el-tooltip>
                        </span>
                        <span v-else>{{ column.__config__['label'] }}</span>
                      </template>
                      <template slot-scope="scope">
                        <span
                          v-if="column.addonBefore">{{column.addonBefore}}</span>{{getThousandsValue(column,scope.row[column.__vModel__])}}<span
                          v-if="column.addonAfter">{{column.addonAfter}}</span>
                        <p v-if="column.isAmountChinese" class="isAmountChinese jnpf-detail-text">
                          {{ amountChinese(scope.row[column.__vModel__]) }}</p>
                      </template>
                    </el-table-column>
                  </template>
                </template>
              </el-table-column>
              <template v-else>
                <el-table-column :key="index" :prop="head.id" :label="head.fullName"
                  :align="item.align" v-if="head.__config__.jnpfKey==='relationForm'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <el-link :underline="false" type="primary"
                      @click.native="toTableDetail(column,scope.row[head.id+'_id'])">
                      {{ scope.row[head.id] }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :prop="head.id"
                  :align="item.align"
                  v-else-if="['relationFormAttr','popupAttr'].includes(head.__config__.jnpfKey)">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <p v-if="!head.id">
                      {{ scope.row[head.relationField.split('_jnpfTable_')[0]+'_'+head.showField] }}
                    </p>
                    <p v-else>
                      {{scope.row[head.id]}}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :prop="head.id"
                  min-width="250px" :align="item.align"
                  v-else-if="head.__config__.jnpfKey==='uploadFile'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <JnpfUploadFile v-model="scope.row[head.id]" detailed disabled />
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :prop="head.id"
                  :align="item.align"
                  v-else-if="head.__config__.jnpfKey==='calculate' &&head.isStorage==0">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <JnpfCalculate :rowIndex="scope.$index" :expression="head.expression"
                      :isStorage="0" :formData="formValue" :isAmountChinese="head.isAmountChinese"
                      :thousands="head.thousands" :precision="head.precision" :detailed="true" />
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :align="item.align"
                  :prop="head.id" v-else-if="head.__config__.jnpfKey==='uploadImg'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <JnpfUploadImg v-model="scope.row[head.id]" detailed disabled />
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :prop="head.id"
                  :align="item.align" v-else-if="head.__config__.jnpfKey==='inputNumber'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <JnpfNumber v-model="scope.row[head.id]" :thousands="head.thousands"
                      :isAmountChinese="head.isAmountChinese" :addonBefore="head.addonBefore"
                      :addonAfter="head.addonAfter" :precision="head.precision"></JnpfNumber>
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :prop="head.id"
                  :align="item.align" v-else-if="head.__config__.jnpfKey==='sign'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <JnpfSign v-model="scope.row[head.id]" detailed />
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :prop="head.id"
                  :align="item.align" v-else-if="head.__config__.jnpfKey==='signature'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <JnpfSignature v-model="scope.row[head.id]" detailed />
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :prop="head.id"
                  :align="item.align" v-else-if="head.__config__.jnpfKey==='location'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <JnpfLocation v-model="scope.row[head.id]"
                      :enableLocationScope='head.enableLocationScope' detailed
                      :clearable='head.clearable' />
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :prop="head.id"
                  :align="item.align" v-else-if="head.__config__.jnpfKey==='slider'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <JnpfSlider v-model="scope.row[head.id]" disabled />
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :prop="head.id"
                  :align="item.align" v-else-if="head.__config__.jnpfKey==='rate'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <JnpfRate v-model="scope.row[head.id]" disabled />
                  </template>
                </el-table-column>
                <el-table-column :key="index" :label="head.fullName" :align="head.align"
                  :prop="head.id" v-else-if="head.__config__.jnpfKey==='input'">
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.__config__.label">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <jnpf-input v-model="scope.row[head.id]" class="jnpf-detail-text"
                      :addonBefore="head.addonBefore" :addonAfter="head.addonAfter"
                      :useMask="head.useMask" :maskConfig="head.maskConfig" detailed />
                  </template>
                </el-table-column>
                <el-table-column :key="index" :prop="head.id" :label="head.fullName"
                  :align="item.align" v-else>
                  <template slot="header">
                    <span slot="label"
                      v-if="head.__config__.tipLabel &&head.fullName">{{head.fullName}}
                      <el-tooltip placement="top" :content='head.__config__.tipLabel'>
                        <a class='el-icon-question tooltip-question'></a>
                      </el-tooltip>
                    </span>
                    <span v-else>{{ head.fullName }}</span>
                  </template>
                  <template slot-scope="scope">
                    <span
                      v-if="head.addonBefore">{{head.addonBefore}}</span>{{getThousandsValue(head,scope.row[head.id])}}<span
                      v-if="head.addonAfter">{{head.addonAfter}}</span>
                    <p v-if="head.isAmountChinese" class="isAmountChinese jnpf-detail-text">
                      {{ amountChinese(scope.row[head.id]) }}</p>
                  </template>
                </el-table-column>
              </template>
            </template>
          </el-table>
        </jnpf-form-tip-item>
      </template>
      <template v-if="item.__config__.jnpfKey==='tab'">
        <el-tabs :type="item.type" :tab-position="item.tabPosition" v-model="item.__config__.active"
          class="mb-10">
          <el-tab-pane v-for="(pane,i) in item.__config__.children" :key="i" :label="pane.title"
            :name="pane.name">
            <el-row>
              <Item v-for="(childItem, childIndex) in pane.__config__.children" :key="childIndex"
                :item="childItem" v-bind="$props" v-on="$listeners" />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-if="item.__config__.jnpfKey==='collapse'">
        <el-collapse :accordion="item.accordion" v-model="item.__config__.active" class="mb-20">
          <el-collapse-item v-for="(pane,i) in item.__config__.children" :key="i"
            :title="pane.title" :name="pane.name">
            <el-row>
              <Item v-for="(childItem, childIndex) in pane.__config__.children" :key="childIndex"
                :item="childItem" v-bind="$props" v-on="$listeners" />
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </template>
      <template v-if="item.__config__.jnpfKey==='tableGrid'">
        <table class="table-grid-box"
          :style="{'--borderType':item.__config__.borderType,'--borderColor':item.__config__.borderColor,'--borderWidth':item.__config__.borderWidth+ 'px'}">
          <tbody>
            <tr v-for="child,index in item.__config__.children" :key="index">
              <td v-for="(it,i) in child.__config__.children" :key="i"
                :colspan="it.__config__.colspan" :rowspan="it.__config__.rowspan"
                v-show="!it.__config__.merged" :style="{
                  '--backgroundColor': it.__config__.backgroundColor,
                }">
                <Item v-for="(childItem, childIndex) in it.__config__.children" :key="childIndex"
                  :item="childItem" v-bind="$props" v-on="$listeners" />
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </template>
  </el-col>
</template>
<script>
import { getDownloadUrl } from '@/api/common'
import { getAmountChinese, thousandsFormat } from '@/components/Generator/utils/index.js'

export default {
  name: 'Item',
  props: {
    item: {
      type: Object,
      required: true
    },
    formConf: {
      type: Object,
      required: true
    },
    formValue: {
      type: Object,
    },
  },
  data() {
    return {
      complexHeaderList: [],
      childColumns: [],
    }
  },
  created() {
    if (this.item.__config__.jnpfKey === 'table') {
      this.item.__config__.children = this.item.__config__.children.filter(column => !column.__config__.noShow && (!column.__config__.visibility || (Array.isArray(column.__config__.visibility) && column.__config__.visibility.includes('pc'))))
      this.complexHeaderList = this.getComplexColumns(this.item.__config__.children)
    }
  },
  methods: {
    toDetail(item) {
      this.$emit('toDetail', item)
    },
    toTableDetail(item, value) {
      item.__config__.defaultValue = value
      this.$emit('toDetail', item)
    },
    downloadFile(file) {
      if (!file.fileId) return
      getDownloadUrl('annex', file.fileId).then(res => {
        this.jnpf.downloadFile(res.data.url, file.name)
      })
    },
    getImgList(list) {
      const newList = list.map(o => this.define.comUrl + o.url)
      return newList
    },
    getValue(item) {
      if (Array.isArray(item.__config__.defaultValue)) {
        if (['timeRange', 'dateRange'].includes(item.__config__.jnpfKey)) {
          return item.__config__.defaultValue.join('')
        }
        return item.__config__.defaultValue.join()
      }
      if (item.thousands) return thousandsFormat(item.__config__.defaultValue)
      return item.__config__.defaultValue
    },
    amountChinese(val) {
      return getAmountChinese(val)
    },
    getThousandsValue(item, val) {
      if (item && item.thousands) return thousandsFormat(val)
      return val
    },
    getSummaries(param) {
      const summaryField = this.item.summaryField
      const thousandsField = []
      this.item.__config__.children.forEach(res => {
        if (res.thousands) thousandsField.push(res.__vModel__)
      })
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (!summaryField.includes(column.property)) {
          sums[index] = '';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0).toFixed(2);
          if (thousandsField.includes(column.property)) sums[index] = thousandsFormat(sums[index])
        } else {
          sums[index] = '';
        }
      });
      return sums
    },
    getComplexColumns(columns) {
      let complexHeaderList = this.item.__config__.complexHeaderList || [];
      let firstChildColumns = []
      columns = columns.map(o => ({
        ...o,
        id: o.__vModel__,
        align: o.__config__.tableAlign,
        fullName: o.__config__.label
      }))
      if (!complexHeaderList.length) return columns;
      let childColumns = [];
      for (let i = 0; i < complexHeaderList.length; i++) {
        const e = complexHeaderList[i];
        e.align = e.align;
        e.children = [];
        e.label = e.fullName
        e.jnpfKey = 'complexHeader',
          e.__vModel__ = e.id
        if (e.childColumns && e.childColumns.length) {
          childColumns.push(...e.childColumns);
          for (let k = 0; k < e.childColumns.length; k++) {
            const item = e.childColumns[k];
            for (let j = 0; j < columns.length; j++) {
              const o = columns[j];
              if (o.__vModel__ == item && o.__config__.tableFixed !== 'left' && o.__config__.tableFixed !== 'right') e.children.push({ ...o });
            }
          }
        }
        if (e.children.length) firstChildColumns.push(e.children[0].__vModel__);
      }
      complexHeaderList = complexHeaderList.filter(o => o.children.length);
      let newList = [];
      for (let i = 0; i < columns.length; i++) {
        const e = columns[i];
        if (!childColumns.includes(e.__vModel__)) {
          newList.push(e);
        } else {
          if (firstChildColumns.includes(e.__vModel__)) {
            const item = complexHeaderList.find(o => o.childColumns.includes(e.__vModel__));
            newList.push(item);
          }
        }
      }
      for (let i = 0; i < childColumns.length; i++) {
        const el = childColumns[i];
        for (let j = 0; j < this.item.__config__.children.length; j++) {
          const item = this.item.__config__.children[j];
          if (el == item.__vModel__) this.swapItems(i, j)
        }
      }
      return newList;
    },
    swapItems(index, index1) {
      // 交换数组中的对象位置
      const temp = this.item.__config__.children[index];
      this.item.__config__.children[index] = this.item.__config__.children[index1];
      this.item.__config__.children[index1] = temp;
    },
  }
}
</script>
